<template>
  <!--水位图-->
  <div id="water-level" style="width: 100%; height: 25vh; margin: 0 auto;"></div>
</template>

<script>
import * as echarts from "echarts";
import 'echarts-liquidfill'

export default {
  name: "WaterLevel",
  props: ['realLevel'],
  watch: {
    realLevel() {
      this.initEcharts()
    }
  },
  methods: {
    initEcharts() {
      let myChart = echarts.init(document.getElementById("water-level"))

      // 真实水位，用于显示
      let realLevel = this.realLevel === 0 ? 1.8 : this.realLevel
      // 相对百分比水位，以5为最高
      let waterLevel = realLevel / 5

      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      let option = {
        title: {
          text: '当前水位 ',
          top: '-2%', // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          left: 'center', // 值: 'left', 'center', 'right' 同上
          show: true,
          textStyle: {
            fontSize: 18,
            color: '#FFF'
          }
        },
        background: '',
        // 提示框组件
        // tooltip: {
        //   trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        //   textStyle: {
        //     color: '#171717' // 文字颜色
        //   },
        //   // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
        //   // 水球图: {a}（系列名称），{b}（无），{c}（数值）
        //   // 使用函数模板   传入的数据值 -> value: number|Array,
        //   formatter: function (value) {
        //     return value.seriesName + ': ' + value.data * 100 + '%'
        //   }
        // },
        series: [
          // 水球图主体
          {
            type: 'liquidFill',
            name: '当前水位', // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: '80%', // 水球图的半径
            center: ['50%', '60%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: 'path://M514.25 122.00000029c-192.75000029 0-349.49999971 50.24999971-349.49999971 110.25v575.24999942c12.75000029 56.99999971 163.50000029 101.99999971 347.24999971 102.00000058 184.5 0 334.50000029-45 347.24999971-102.00000058v-574.49999971l3.00000058-0.74999971c0.74999971-60.00000029-155.25-110.25-348.00000029-110.25z m-72 629.24999942h-150.75c-12.75000029 0-23.24999971-9.74999971-23.24999971-22.5 0-11.99999971 10.50000029-22.5 23.24999971-22.5h150.75c12.75000029 0 23.24999971 9.74999971 23.24999971 22.5 0.74999971 12.75000029-9.74999971 22.5-23.24999971 22.5z m0-98.24999942h-150.75c-12.75000029 0-23.24999971-9.74999971-23.24999971-22.5 0-11.99999971 10.50000029-22.5 23.24999971-22.5h150.75c12.75000029 0 23.24999971 9.74999971 23.24999971 22.5 0.74999971 12.75000029-9.74999971 22.5-23.24999971 22.5z m0-100.50000029h-150.75c-12.75000029 0-23.24999971-9.74999971-23.24999971-22.5 0-11.99999971 10.50000029-22.5 23.24999971-22.5h150.75c12.75000029 0 23.24999971 9.74999971 23.24999971 22.5 0.74999971 12.75000029-9.74999971 23.24999971-23.24999971 22.5z m0-93.75000029h-150.75c-12.75000029 0-23.24999971-9.74999971-23.24999971-22.5 0-11.99999971 10.50000029-22.5 23.24999971-22.5h150.75c12.75000029 0 23.24999971 9.74999971 23.24999971 22.5 0.74999971 12.75000029-9.74999971 22.5-23.24999971 22.5z m297.74999971 255.00000058h-1.49999942c-29.99999971 27.74999971-74.25 35.25000029-112.5 20.99999971-38.25-15.00000029-63.74999971-49.5-64.50000029-89.25000029 1.50000029-35.25000029 18.74999971-67.5 47.25-90s45-55.50000029 46.50000029-90.74999971c0-2.99999971 2.25-6.75 5.24999971-8.25000029 2.99999971-1.50000029 6.75-1.50000029 9.74999971 0s5.24999971 4.5 5.25000058 8.25000029c1.50000029 35.25000029 18 68.24999971 46.49999942 90.74999971 28.50000029 22.5 45.74999971 55.50000029 47.25 90.75000058 0 24.00000029-10.50000029 48.75000029-29.25 67.5z m-221.24999971-443.25c-153 0-277.49999971-24.75-277.49999971-54.75000058s123.75-54.74999971 277.49999971-54.74999971c153 0 277.49999971 24.75 277.49999971 54.74999971s-124.49999971 54.74999971-277.49999971 54.75000058zM863 232.25000029z',
            // 边框
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 0, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#fff', // 边框的阴影颜色,
                borderColor: '#41dcd8' // 边框颜色
              }
            },
            // 图形样式
            itemStyle: {
              opacity: 0.8, // 波浪的透明度
              shadowBlur: 10 // 波浪的阴影范围
            },
            backgroundStyle: {
              color: 'rgba(0, 0, 0, 0)', // 水球未到的背景颜色
              opacity: 0.5
            },
            // 图形上的文本标签
            label: {
              fontSize: 32,
              fontWeight: 300,
              color: '#7de7ec',
              formatter: function () {
                return realLevel + "米"
              }
            },
            data: [waterLevel, {
              value: waterLevel * 3/5,
              direction: 'left'
            }, waterLevel /2, {
              value: waterLevel /3,
              direction: 'left'
            }]
          }
        ]
      }

      myChart.setOption(option)
    }
  },
  mounted() {
    this.initEcharts()
  }
}
</script>

<style scoped>
#water-level {
  /*background: url("../../assets/img/card.png")  no-repeat center center;*/
  background-size: 80% 160%;
  margin: 10px auto 0;
}
</style>
